<template>
	<view class="page">
		<message-navigation :headPic="user.headPic" :nickName="user.nickName" :status = "user.status"></message-navigation>

		<scroll-view class="message-list-block scroll-Y" 
		:style="{
			'height': screenHeight-statusBarHeight+'px'
		}"
		:scroll-top="scrollTop"
		 scroll-y="true" 
		>
			<view class="search-button-block" :style="{'margin-top':statusBarHeight+90+'px'}">
				<button class="search-button"><label class="iconfont iconsousuo"></label>搜索</button>
			</view>
			<view class="message-list" v-for="(item, index) in friendmessageList" :key=index @click="toChatInterface(item)">
				<view class="message-head">
					<image :src="item.headPic" class="head-pic"></image>
				</view>
				<view class="message-inner">
					<view class="message-name">
						{{item.nickName}}
					</view>
					<view class="message-context omit">
						{{item.lastMessage}}
					</view>
				</view>
				<view class="message-details">
					<view class="message-time">
						星期一
					</view>
					<view class="message-number" v-if="item.unReadNum>0">
						{{item.unReadNum}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import utils from "@/common/util.js"
	import msg from "@/api/message.js"
	import friend from "@/api/friend.js"
	
	var _self
	
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight, //获取的状态栏高度
				screenHeight: uni.getSystemInfoSync().screenHeight, // 手机屏幕高度
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				friendmessageList: {},
				user: {},
				message: utils.message,
				historyMessageNack: [],
				socketTask: null,
				sid: '', // 定时器id
				// 确保websocket是打开状态
				noReadeNumber: 0 // 未读信息数目
			}
		},
		// 下拉刷新触发
		onPullDownRefresh() {
			this.getMessageList()
			// 停止当前页面下拉刷新
			uni.stopPullDownRefresh()
		},
		onLoad() {
			_self = this
			// 获取当前用户信息 
			var userInfo = uni.getStorageSync("userInfo")
			if (userInfo == "") {
				uni.reLaunch({
					url:'../login/addAndRegister/addAndRegister',
					animationType: 'slide-in-bottom',
					animationDuration: 200
				})
			} else {
				this.user = userInfo
			}
			this.message.sender = this.user.id
			
			uni.$on('updateMsg',function(data){
				console.log('监听到事件来自 updateMsg');
				setTimeout(function(){
					_self.getMessageList()
				},100)
			})
			
			// this.getMessageList()
		},
		onShow(){
			// 设置当前聊天窗口位置
			this.$store.commit("setMessageLocation",-1)
			this.getMessageList()
		},
		// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
		beforeDestroy() {
			
		},
		methods: {
			async getMessageList(){
				// 获取未读消息列表
				var msglist = await msg.getMessageList()
				var fml = {}
				var sumUnReadNum = 0
				if(msglist !== null && msglist !== undefined){
					for(var key in msglist){
						// 获取好友资料
						fml[key] = await friend.getFriendInfo(key)
						// 判断当前用户是否由未读消息
						var readMsgList = msglist[key]["read"]
						var unReadMsgList = msglist[key]["unread"]
						if(unReadMsgList !== undefined && unReadMsgList.length > 0){
							// 最后一条信息
							fml[key].lastMessage = unReadMsgList[unReadMsgList.length-1].context
							// 未读条数
							fml[key].unReadNum = unReadMsgList.length
							sumUnReadNum += unReadMsgList.length
						}else{
							// 最后一条信息
							if(readMsgList !== undefined && readMsgList.length > 0){
								fml[key].lastMessage = readMsgList[readMsgList.length-1].context
							}
							// 未读条数
							fml[key].unReadNum = 0
						}
					}
				}
				// 更新数据
				this.friendmessageList = fml
				
				_self.$store.commit("setUnReadNum",sumUnReadNum)
				if(sumUnReadNum > 0){
					uni.setTabBarBadge({
						index:0,
						text: JSON.stringify(sumUnReadNum)
					})
				}else{
					uni.hideTabBarRedDot({
						index:0
					})
				}
				
				
			},
			onPulling(e) {
				// console.log("onpulling", e);
			},
			onRefresh() {
				uni.startPullDownRefresh();
			},
			onRestore() {
				//this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			toChatInterface(item) {
				uni.navigateTo({
					url: 'chat/chat?receiver='+ item.id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		},
	}
</script>

<style>
	@import url("message.css");
</style>
